<script setup lang="ts">
import{reactive, ref} from 'vue'
  const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])
const del = (id:number)=>{
  list.value = list.value.filter(item=>item.id!==id)
}

const bookInfo = reactive({
  id:0,
  name:'',
  author:''
})
const addBook  = ()=>{
  bookInfo.id = Date.now()
  // list.value.push({...bookInfo})
  
  // 将bookInfo对象的一个浅拷贝添加到list数组中
list.value.push(Object.assign({}, bookInfo))
}

</script>
<template>
 <div id="app">
  <h3>黑马书架</h3>
  <div>
    <input type="text" v-model="bookInfo.name" placeholder="请输入书名">
    <input type="text" v-model="bookInfo.author" placeholder="请输入作者">
    <button @click="addBook()">添加</button>
  </div>
  
  <ul>
    <li v-for="item in list" :key="item.id">
      <span>{{ item.name }}</span>
      <span>{{ item.author }}</span>
      <button @click="del(item.id)">删除</button>
    </li>
  </ul>
 </div>
</template>
<style scoped>
  
</style>

